<template>
  <div class="container">
    <div class="desc">
      <n-grid cols="1" item-responsive responsive="screen">
        <n-gi span="1 m:0" style="display: flex; flex-direction: column; align-items: center; justify-content: center">
          <n-icon :size="64">
            <IconDriftingBottleFace style="height: 100%; width: 100%" />
          </n-icon>
          <n-p>新相遇，心相知</n-p>
        </n-gi>
        <n-gi span="0 m:1" style="display: flex; align-items: center; justify-content: center">
          <n-icon :size="64">
            <IconDriftingBottleFace style="height: 100%; width: 100%" />
          </n-icon>
          <n-p>新相遇，心相知</n-p>
        </n-gi>
      </n-grid>
    </div>

    <div class="action-bar">
      <n-space>
        <n-button type="primary" @click="createMessage">
          <template #icon>
            <n-icon size="16">
              <IconDriftingBottle />
            </n-icon>
          </template>
          扔漂流瓶
        </n-button>
        <n-button @click="pickMessage" :loading="pickRequesting" :disabled="pickRequesting">
          <template #icon>
            <n-icon size="16">
              <IconFishingNet />
            </n-icon>
          </template>
          打捞一下
        </n-button>
      </n-space>
    </div>
  </div>
</template>

<script setup>
import IconDriftingBottle from "@/components/icons/IconDriftingBottle.vue";
import IconFishingNet from "@/components/icons/IconFishingNet.vue";
import IconDriftingBottleFace from "@/components/icons/IconDriftingBottleFace.vue";
import {useRequests} from "@/common/requests.js";
import {ref} from "vue";
import {useMessage, useNotification} from "naive-ui";
import {useRouter} from "vue-router";
import {useUserStore} from "@/stores/user.js";

const requests = useRequests()
const notify = useNotification()
const message = useMessage()
const router = useRouter()
const userStore = useUserStore()

const createMessage = () => {
  router.push({name: 'CreateMessage'})
}

const pickRequesting = ref(false)
const pickMessage = () => {
  if (userStore.token == null) {
    return router.push({name: 'UserLoginPage'})
  }

  pickRequesting.value = true
  requests.message.pick().then(resp => {
    pickRequesting.value = false
    if (resp.ret === 0) {
      router.push({name: 'MessageView', params: {id: resp.data}})
    } else if (typeof resp.data == 'object' && resp.data != null) {
      router.push({name: 'MessageView', params: {id: resp.data[0]}})
    } else {
      message.error(resp?.data ?? resp?.msg ?? '未知错误')
    }
  }).catch(err => {
    pickRequesting.value = false

    console.log(err)
    notify.error({content: "出错了", meta: err.toString(), duration: 1500})
  })
}
</script>

<style lang="scss" scoped>
.container {
  height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .desc {
    display: flex;
    align-items: center;
    justify-content: center;

    .n-p {
      margin: 0 .5rem;
      flex: 1;
      font-size: 2rem;
      word-wrap: break-word;
    }
  }

  .action-bar {
    margin-top: 2rem;
  }
}
</style>
